<template>
	<el-card id="send-email" class="center-horizontal">
		<el-form :model="email" :rules="rules" label-position="right" label-suffix=":" label-width="160px">
			<el-form-item label="模版名称" prop="name">
				<el-col :sm="22">
					<el-input v-model="email.name"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="邮件标题" prop="title">
				<el-col :sm="22">
					<el-input v-model="email.title"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="抄送人" prop="sender">
				<el-col :sm="22">
					<el-input v-model="email.sender"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="模版内容" prop="content">
				<el-col :sm="22">
					<rich-editor :standard="true" :value="email.content" @input="getContents"></rich-editor>
				</el-col>
			</el-form-item>
			{{email.content}}
			<el-form-item>
				<el-col :sm="22">
					<el-button type="primary" @click="submit">确认发送</el-button>
				</el-col>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
export default {
	name: "send-email",
	data() {
		return {
			email: {
				name: "",
				title: "",
				sender: "",
				content: ""
			},
			rules: {
				name: [
					{required: true, message: "请输入邮件模版名称", trigger: "blur"}
				],
				title: [
					{required: true, message: "请输入邮件标题", trigger: "blur"}
				],
				sender: [
					{required: true, message: "请输入邮件抄送人", trigger: "blur"}
				]
			}
		};
	},
	methods: {
		getContents(value) {
			this.email.content = value;
		},
		submit() {
			console.log(this.email);
		}
	}
};
</script>

<style scoped>
#send-email >>> .el-card {
	background-color: #F5F5F5;
}
</style>
